﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="ChiTietSP.aspx.cs" Inherits="IMark.ChiTietSP" %>
<%@ Register src="UC/SanPhamLienQuanCtrl.ascx" tagname="SanPhamLienQuanCtrl" tagprefix="uc1" %>
<%@ Register src="UC/MeneMetroBottomCtrl.ascx" tagname="MeneMetroBottomCtrl" tagprefix="uc1" %>
<%@ Register src="UC/SanPhamDacBietCtrl.ascx" tagname="SanPhamDacBietCtrl" tagprefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="js/DatHang.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
       <div class="row clearfix f-space10"></div>
    <div class="container"> 
  <!-- row -->
  <div class="row">
    <div class="col-md-12 box-block"> 
      
      <!--  box content -->
      
      <div class="box-content"> 
        <!-- single product -->
        <div class="single-product"> 
          <!-- Images -->
          <div class="images col-md-6 col-sm-12 col-xs-12">
            <div class="row"> 
              <!-- Small Images -->
              <div class="thumbs col-md-3 col-sm-3 col-xs-3"  id="thumbs">
                <ul runat="server" id="liHinhSP">
                    
                </ul>
              </div>
              <!-- end: Small Images --> 
              <!-- Big Image and Zoom -->
              <div class="big-image col-md-9 col-sm-9 col-xs-9"> 
                  <img id='product-image' src='images/products/<%=SanPham.HINH_SAN_PHAM.First().Hinh %>' data-zoom-image='images/products/<%=SanPham.HINH_SAN_PHAM.First().Hinh %>' alt='big image' />
              </div>
              <!-- end: Big Image and Zoom --> 
            </div>
          </div>
          
          <!-- end: Images --> 
          
          <!-- product details -->
          
          <div class="product-details col-md-6 col-sm-12 col-xs-12"> 
            
            <!-- Title and rating info -->
            <div class="title">
              <h1><%=SanPham.TenSanPham %></h1>
              <div class="rating"> <%=GenerateRation(SanPham.DANH_GIA.ToList()) %> <span>Sản phẩm này có <%=SanPham.DANH_GIA.Count() %> lượt xem và đánh giá <a href="#wr">Nhận Xét</a></span> </div>
            </div>
            <!-- end: Title and rating info -->
            
            <div class="row"> 
              <!-- Availability, Product Code, Brand and short info -->
              <div class="short-info-wr col-md-12 col-sm-12 col-xs-12">
                <div class="short-info">
                  <div class="product-attr-text">Tình Trạng: <span class="available"><%if(SanPham.SoLuong>0){ %>Còn Hàng<%}else{ %>Hết Hàng<%} %></span></div>
                  <div class="product-attr-text">Mã Sản Phẩm: <span><%=SanPham.ID %></span></div>
                  <div class="product-attr-text">Thương Hiệu: <span><%=SanPham.ThuongHieu %></span></div>
                  <p class="short-info-p"><%=SanPham.MoTaTomTat %></p>
                </div>
              </div>
              <!-- end: Availability, Product Code, Brand and short info --> 
              
            </div>
            <div class="row">
              <div class="short-info-opt-wr col-md-7 col-sm-8 col-xs-12">
                <div class="short-info-opt">
                  <div class="att-row pull-left">
                    <div class="qty-wr">
                      <div class="qty-text hidden-xs">Qty:</div>
                      <div class="quantity-inp">
                        <input type="text" class="quantity-input" name="p_quantity" value="1">
                      </div>
                      <div class="quantity-txt"><a href="#a" class="qty qtyminus" ><i class="fa fa-minus fa-fw"></i></a></div>
                      <div class="quantity-txt"><a href="#a" class="qty qtyplus" ><i class="fa fa-plus fa-fw"></i></a></div>
                    </div>
                  </div>
                </div>
              </div>
                
              <div class="short-info-share-wr col-md-5 col-sm-4 col-xs-12">
                <div class="short-info-opt"> 
                  <!-- AddThis Button BEGIN -->
                  <div class="addthis_toolbox addthis_default_style addthis_32x32_style"> 
                      <a class="addthis_button_facebook addthis-btn"></a> 
                      <a class="addthis_button_twitter addthis-btn" ></a> 
                      <a class="addthis_button_google_plusone_share addthis-btn"></a> 
                      <a class="addthis_button_compact addthis-btn"></a> </div>
                  <script type="text/javascript">
                      var addthis_config = { "data_track_addressbar": true };
</script> 
                  <%--<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4df5ee7405c65a76"></script> --%>
<script src="js/300/addthis_widget.js"></script>
                  <!-- AddThis Button END --> 
                </div>
              </div>
            </div>
            <div class="row">
              <div class="price-wr col-md-4 col-sm-4 col-xs-12">
                <%if(SanPham.NgayBatDau<= DateTime.Now && SanPham.NgayKetThuc>=DateTime.Now) {%>
                    <div class="big-price"> 
                        <span class="price-old"><%=String.Format(System.Globalization.CultureInfo.InvariantCulture,
                                         "{0:0,0}", SanPham.DonGia) %><span class="sym">đ</span></span> 
                        <span class="price-new"><%=String.Format(System.Globalization.CultureInfo.InvariantCulture,"{0:0,0}",(SanPham.DonGia - ((SanPham.DonGia*SanPham.GiamGia)/100))) %><span class="sym">đ</span></span> 
                    </div>
                <%}else{ %>
                  <div class="big-price"> 
                        <span class="price-new"><%=String.Format(System.Globalization.CultureInfo.InvariantCulture,
                                         "{0:0,0}",SanPham.DonGia )%><span class="sym">đ</span></span> 
                    </div>
                <%} %>
              </div>
              <div class="product-btns-wr col-md-8 col-sm-8 col-xs-12">
                <div class="product-btns">
                  <div class="product-big-btns">
                    <button class="btn btn-addtocart" onclick="DatHang(<%=SanPham.ID %>)"> <i class="fa fa-shopping-cart fa-fw"></i> Đặt Hàng </button>
                    <button class="btn btn-default btn-compare" data-toggle="tooltip" title="Add to Compare" onclick="Compare(<%=SanPham.ID %>)"> <i class="fa fa-retweet fa-fw"></i> </button>
                    <button class="btn btn-wishlist" data-toggle="tooltip" title="Add to Wishlist" onclick="ThemVaoYeuThich(<%=SanPham.ID %>)"> <i class="fa fa-heart fa-fw"></i> </button>
                    <button class="btn btn-sendtofriend" data-toggle="tooltip" title="Send to Friend"> <i class="fa fa-envelope fa-fw"></i> </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- end: product details --> 
          
        </div>
        
        <!-- end: single product --> 
        
      </div>
      
      <!-- end: box content --> 
      
    </div>
  </div>
  <!-- end:row --> 
</div>
    <!-- end: container-->

<div class="row clearfix f-space30"></div>

<!-- container -->
<div class="container"> 
  <!-- row -->
  <div class="row"> 
    <!-- tabs -->
    <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 main-column box-block product-details-tabs"> 
      
      <!-- Details Info/Reviews/Tags --> 
      <!-- Nav tabs -->
      <ul class="nav nav-tabs blog-tabs nav-justified">
        <li class="active"><a href="#details-info" data-toggle="tab"><i class="fa  fa-th-list fa-fw"></i> Chi Tiết Sản Phẩm</a></li>
        <li><a href="#custom-tab" data-toggle="tab"><i class="fa fa-video-camera fa-fw"></i> Thông Tin Thêm</a></li>
        <li><a href="#reviews" data-toggle="tab"><i class="fa fa-comments fa-fw"></i> Nhận Xét</a></li>
      </ul>
      <!-- Tab panes -->
      <div class="tab-content">
        <div class="tab-pane active" id="details-info">
          <%=SanPham.MoTaChiTiet %>
        </div>
        <div class="tab-pane" id="reviews">
            <div class="write-reivew" id="#write-review">
            <h3>Bạn đánh giá sản phẩm này như thế nào</h3>
            <div class="fr-border"></div>
            
            <!-- Form -->
              <div class="row">
                <div class="col-md-4 col-xs-12"> <a name="wr"> </a>
                  <fieldset class="rating">
                    <input class="ra" type="radio" id="star5" name="rating" value="5" />
                    <label for="star5" title="Rocks!" class="fa fa-star">5 stars</label>
                    <input class="ra" type="radio" id="star4" name="rating" value="4" />
                    <label for="star4" title="Pretty good" class="fa fa-star">4 stars</label>
                    <input class="ra" type="radio" id="star3" name="rating" value="3" />
                    <label for="star3" title="Cool" class="fa fa-star">3 stars</label>
                    <input class="ra" type="radio" id="star2" name="rating" value="2" />
                    <label for="star2" title="Kinda bad" class="fa fa-star">2 stars</label>
                    <input class="ra" type="radio" id="star1" name="rating" value="1" />
                    <label for="star1" title="Oops!" class="fa fa-star">1 star</label>
                  </fieldset>
                  
                    <input type="text" id="name" placeholder="Tên">
                  <input type="text" id="email" placeholder="E-mail">
                </div>
                <div class="col-md-8 col-xs-12">
                  <textarea name="" id="review" placeholder="Đánh giá..." rows="8"></textarea>
                </div>
              </div>
                
              <button class="btn normal color1 pull-right" onclick="SubmitComment()">Submit</button>
            
            <!-- end: Form --> 
          </div>
          <div class="heading"> <span><strong>"<%=SanPham.TenSanPham %>"</strong> có <%=SanPham.DANH_GIA.Count() %> nhận xét và đánh giá</span>
            <div id="ratingandcomment">
                <div>
                    <div class="rating" id="rating" runat="server"> 
                    <i class="fa fa-star"></i> 
                    <i class="fa fa-star"></i> 
                    <i class="fa fa-star"></i> 
                    <i class="fa fa-star-half-o"></i> 
                    <i class="fa fa-star-o"></i> </div>
                </div>
                <%foreach (var item in SanPham.DANH_GIA.OrderByDescending(o=>o.NgayThem).ToList()){%>
		             <div class="review">
                        <div class="review-info">
                          <div class="name"><i class="fa fa-comment-o fa-flip-horizontal fa-fw"></i> <%=item.Ten %></div>
                          <div class="date"> vào <em><%=item.NgayThem %></em></div>
                          <div class="rating"> <%=GenerateRatingTheoSoSao(item.SoSao) %></div>
                        </div>
                        <div class="text"><%=item.NoiDung %></div>
                      </div>
                  
                <%} %>
            </div>
        </div>
          
          
        </div>
        
        <div class="tab-pane" id="custom-tab">
          <%=SanPham.ThongTinThem %>
        </div>
      </div>
      <!-- end: Tab panes --> 
      <!-- end: Details Info/Reviews/Tags -->
      <div class="clearfix f-space30"></div>
    </div>
    <!-- end: tabs --> 
    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 box-block sidebar">
    <uc1:SanPhamDacBietCtrl ID="SanPhamDacBietCtrl1" runat="server" /> 
    </div>
  </div>
  <!-- row --> 
</div>
<!-- end: container --> 
<!-- Relate Products -->

<div class="container">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 main-column box-block">
      <uc1:SanPhamLienQuanCtrl ID="SanPhamLienQuanCtrl1" runat="server" />
    </div>
  </div>
</div>

<!-- end: Related products -->
    <uc1:MeneMetroBottomCtrl ID="MeneMetroBottomCtrl1" runat="server" />
    <br />
    <script src="js/jquery.elevatezoom.js" type="text/javascript"></script> 
<script>
    var sosao = 0;
    $(document).ready(function () {
        if (localStorage.Recently != null)
        {
            var IDRecently = JSON.parse(localStorage.Recently);
            var bool = true;
            for (var i = 0; i < IDRecently.length; i++) {
                if(IDRecently[i].ID==getParameterByName("ID"))
                {
                    bool = false;
                }
            }
            if (bool)
            {
                var ID = { "ID": getParameterByName("ID"), "TenSP": '<%=SanPham.TenSanPham %>', "DonGia": '<%=SanPham.DonGia%>', "NgayBatDau": '<%=SanPham.NgayBatDau%>', "NgayKetThuc": '<%=SanPham.NgayKetThuc%>', "GiamGia": '<%=SanPham.GiamGia%>' };
                IDRecently.push(ID);
                localStorage.Recently = JSON.stringify(IDRecently);
            }
        }
        else
        {
            var IDSP = getParameterByName("ID");
            var ID = [{ "ID": IDSP, "TenSP": '<%=SanPham.TenSanPham %>', "DonGia": '<%=SanPham.DonGia%>', "NgayBatDau": '<%=SanPham.NgayBatDau%>', "NgayKetThuc": '<%=SanPham.NgayKetThuc%>',"GiamGia":'<%=SanPham.GiamGia%>' }];
            localStorage.Recently = JSON.stringify(ID);
        }
    });
    (function ($) {
        "use strict";
        //Mega Menu
        $('#menuMega').menu3d();

        //Help/Contact Number/Quick Message
        $('.quickbox').carousel({
            interval: 10000
        });

        //SPECIALS
        $('#productc2').carousel({
            interval: 4000
        });


        //Zoom Product
        $("#product-image").elevateZoom({
            zoomType: "inner",
            cursor: "crosshair",
            easing: true,
            gallery: "thumbs",
            galleryActiveClass: "active",
            loadingIcon: true
        });
        $("#product-image").bind("click", function (e) {
            var ez = $('#product-image').data('elevateZoom');
            ez.closeAll(); //NEW: This function force hides the lens, tint and window	
            //$.fancybox(ez.getGalleryList());     
            return false;
        });

        $(".ra").click(function () {
            sosao = $(this).attr("value");
        })

        
    })(jQuery);

    DatHang = function(ID)
    {
        ThemVaoGioHang(ID, $(".quantity-input").val());
    }
    SubmitComment = function () {
        $.ajax({
            type: "POST",
            async:false,
            url: "CS.aspx/LaySanPhamTheoLoai",
            data: JSON.stringify({
                Ten: $("#name").val(),
                Email: $("#email").val(),
                NoiDung: $("#review").val(),
                Sao: sosao,
                IDSP: getParameterByName("ID")
            }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                generateComment();
            }
        })
        
    }
    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    generateComment = function () {
        var oldhtml = $("#ratingandcomment").html();
        var currentdate = new Date();
        currentdate = currentdate.getDate() + "/"
                + (currentdate.getMonth() + 1) + "/"
                + currentdate.getFullYear() + " "
                + currentdate.getHours() + ":"
                + currentdate.getMinutes() + ":"
                + currentdate.getSeconds();
        var html = "";
        html += '<div class="review"><div class="review-info"><div class="name"><i class="fa fa-comment-o fa-flip-horizontal fa-fw"></i> ' + $("#name").val() + '</div>';
        html += '<div class="date"> vào <em>' + currentdate + '</em></div>';
        html += '<div class="rating">';
        for (var i = 0; i < sosao; i++) {
            html += '<i class="fa fa-star"></i>';
        }
        for (var i = 0; i < 5 - sosao; i++) {
            html += '<i class="fa fa-star-o"></i>';
        }
        html += '</div></div>';
        html += '<div class="text">' + $("#review").val() + '</div>';
        html += '</div>';
        $("#ratingandcomment").html(html);
        $("#ratingandcomment").append(oldhtml);
    }
 </script>
</asp:Content>
